import React, { useEffect } from 'react'
import { Image, Text, View } from '@tarojs/components'
import { PLAN_BG_IMAGES } from '@CONSTANTS/planManagement'
import style from './PlanTransition.module.scss'

interface Props {
  onEnd: () => void
}

const PlanTransition: React.FC<Props> = ({ onEnd }) => {
  const randomIndex = Math.floor(Math.random() * PLAN_BG_IMAGES.length)
  const { image, title, desc } = PLAN_BG_IMAGES[randomIndex] || PLAN_BG_IMAGES[0]
  useEffect(() => {
    const timerId = setTimeout(() => {
      onEnd?.()
    }, 1000)
    return () => clearTimeout(timerId)
  }, [onEnd])
  return (
    <View className={style.container}>
      <Image src={image} className={style.bgImage} />
      <Text className={style.title}>{title}</Text>
      <Text className={style.desc}>{desc}</Text>
      <View className={style.progressContainer}>
        <View className={style.progress} />
      </View>
    </View>
  )
}

export default React.memo(PlanTransition)
